@import '../../../style/base.styl';
@import '/animate.styl';
$indent = 10
random(min, max)
	$number = floor(math(0, 'random')*(max - min + 1) + min)
	return unit($number, rpx)
$width = random(0, 30) + 30rpx;
for i in 1..$indent {
    .li:nth-child({i}) {
		top 50%
		// styl: for 循环里面调用方法不能去掉冒号&分号
	    left: random(0, 140) + 30rpx;
		transform translate(-50%, -50%)
		//width: random(0, 30) + 30rpx;
		//height: random(0, 30) + 30rpx;
		width $width
		height $width
		animation: moveToTop (random(0,6) + 3)s ease-in-out -(random(0, 5))s infinite;
	}
}
.container
	min-height 100vh
	padding 32rpx
	box-sizing border-box
	background #000
	overflow hidden
	.container
		width 600rpx
		position relative
		margin auto
		.number
			position absolute
			top 27%
			width 100%
			font-size 64rpx
			text-align center
			z-index 10
			color #fff
		.contrast
			filter contrast(10) hue-rotate(0)
			width 600rpx
			height 800rpx
			background #000
			overflow hidden
			animation hueRotate 20s infinite linear
			-webkit-animation hueRotate 20s infinite linear
		.circle
			position relative
			width 600rpx
			height 600rpx
			box-sizing border-box
			filter blur(16rpx)
			&::after
				content ""
				position absolute
				top 40%
				left 50%
				transform translate(-50%, -50%) rotate(0)
				width 400rpx
				height 400rpx
				background #00ff6f
				border-radius 42% 38% 62% 49% / 45%;
				animation rotate 10s infinite linear
				-webkit-animation rotate 10s infinite linear
			&::before
				content ""
				position absolute
				width 352rpx;
				height 352rpx;
				top 40%
				left 50%
				transform translate(-50%, -50%)
				border-radius 50%
				background #000
				z-index 10
		.bubbles
			position absolute
			left 50%
			bottom 0
			width 200rpx
			height 80rpx
			transform translate(-50%, 0)
			border-radius 50% 50% 0 0
			background #00ff6f
			filter blur(5rpx)
			.li
				position absolute
				border-radius 50%
				background #00ff6f
	.btn
		width 220rpx
		height 68rpx
		display flex
		align-items center
		font-size 32rpx
		color #fff
		border-radius 34rpx
		justify-content center
		background $shallowThemeColor
		margin 50rpx auto



